<template>
  <div class="character">
    <h2>角色装备</h2>
    <div class="slots">
      <div
        v-for="(slot, index) in slots"
        :key="index"
        class="slot"
        :class="{ filled: slot.item }"
      >
        <draggable
          v-if="slot.item"
          :list="{ [index]: slot.item }"
          group="items"
          @change="onSlotChange(index)"
          @end="onDragEnd(index, slot.item)"
        >
          <div class="equipped-item">{{ slot.item.name }}</div>
        </draggable>
        <div v-else class="empty-slot">空</div>
      </div>
    </div>
  </div>
</template>

<script>
import draggable from 'vuedraggable';

export default {
  components: {
    draggable,
  },
  data() {
    return {
      slots: [{ item: null }, { item: null }, { item: null }],
    };
  },
  methods: {
    onSlotChange(index) {
      this.slots[index].item = this.slots[index].item || null;
    },
    addItem(item) {
      const emptySlot = this.slots.find((slot) => !slot.item);
      if (emptySlot) {
        emptySlot.item = item;
        this.$emit('update-slots', this.slots);
      }
    },
    onDragEnd(index, item) {
      this.$emit('remove-item', item);
    },
  },
};
</script>

<style scoped>
.character {
  width: 200px;
  border: 1px solid #ccc;
  padding: 10px;
}
.slots {
  display: flex;
  flex-direction: column;
}
.slot {
  width: 100%;
  padding: 10px;
  border: 1px dashed #ccc;
  margin-bottom: 10px;
  text-align: center;
}
.slot.filled {
  border-style: solid;
}
.empty-slot {
  color: #aaa;
}
.equipped-item {
  padding: 5px;
  background-color: #d0e6ff;
  cursor: grab;
}
</style>
